<template>
  <view>
    <!--企业订单待支付-->
    <uni-popup ref="accountPayDialog">
      <uni-popup-dialog
          type="info"
          cancelText="取消"
          confirmText="确认"
          title="订单支付"
          @close="cancel"
          @confirm="submitForm"
          before-close>
        <template v-slot="content">
          <view class="tip">
            <view style="display:inline;">
              <i class="iconfont colorIcon" style="margin-right: 10rpx;">&#xe6a4;</i>
              企业账户：【 <span style="font-weight: 550;">{{ companyInfo.name }} </span>】，账户余额：
              <span style="font-weight: 550;">{{ companyInfo.balance }} </span>元；
            </view>
          </view>
          <uni-forms
              ref="form"
              :modelValue="form"
              :rules="rules"
              :label-width="80" type="line" label-align="right"
              class="paddingAll">
            <uni-forms-item label="订单编号" name="number">
              <uni-easyinput v-model="orderPay.number" type="text" placeholder="请输入订单编号" disabled/>
            </uni-forms-item>
            <uni-forms-item label="订单名称" name="name">
              <uni-easyinput v-model="orderPay.name" type="text" placeholder="请输入订单名称" disabled/>
            </uni-forms-item>
            <uni-forms-item label="下单人" name="orderPersonName">
              <uni-easyinput v-model="orderPay.orderPersonName" type="text" placeholder="请输入下单人名称" disabled/>
            </uni-forms-item>
            <uni-forms-item label="支付金额" name="amount">
              <uni-easyinput v-model="orderPay.amount+'元'" type="text" placeholder="请输入支付金额" disabled/>
            </uni-forms-item>
            <uni-forms-item label="支付密码" name="payPwd" required>
              <uni-easyinput v-model="form.payPwd" type="password" placeholder="请输入支付密码" maxlength="6"/>
            </uni-forms-item>
          </uni-forms>
          <view class="show-text">
            <i class="iconfont colorIcon" style="font-size: 26rpx;margin-right: 10rpx;">&#xe70f;</i>
            提醒：您将通过企业账户余额购买支付，将扣除【 <span style="font-weight: 550;">{{ companyInfo.name }} </span>】企业账户余额，请知悉！
          </view>
        </template>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import {getCompany} from "@/api/ec/work/company/company";
import {toOrderPay} from "@/api/ec/console/fee/orderPay";

export default {
  props: {},
  data() {
    return {
      // 企业信息
      companyInfo: this.$store.getters.companyInfo,
      // 订单信息
      orderPay: {},
      // 表单参数
      form: {
        id: undefined,
        payPwd: undefined,
      },
      // 验证
      rules: {
        payPwd: {
          rules: [
            {required: true, errorMessage: '请输入支付密码'},
          ]
        },
      },
    };
  },
  methods: {
    /** 打开弹出框 */
    toOpenDialog(orderPay) {
      this.orderPay = orderPay;
      this.selectStaff = {};
      this.form.id = orderPay.id;
      this.form.payPwd = null;
      this.getCompanyInfo();
      this.$refs.accountPayDialog.open('center')
    },
    /** 取消按钮 */
    cancel() {
      this.$refs.accountPayDialog.close()
    },
    /** 查询企业信息 */
    getCompanyInfo() {
      getCompany(this.companyInfo.id).then(response => {
        this.companyInfo = response.data;
      });
    },
    /** 支付 */
    submitForm() {
      this.$refs.form.validate().then((res) => {
        this.$modal.loading();
        toOrderPay(this.form.id, this.form.payPwd).then(() => {
          uni.hideLoading()
          this.$modal.msgSuccess("订单支付成功！");
          this.$emit("success", "");
          setTimeout(() => {
            this.cancel()
          }, 300)
        }).catch(() => {
          uni.hideLoading()
        });
      });
    },
  }
};
</script>
<style scoped lang="scss">

::v-deep .uni-popup-dialog {
  width: 90%;
}

::v-deep .uni-dialog-content {
  padding: 20rpx;
  display: block;
}

.tip {
  background: #E6F6EF;
  padding: 15rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #555b65;
  line-height: 35rpx;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  margin-bottom: 25rpx;
}

.show-text {
  color: #666;
  padding: 15rpx;

  p {
    text-align: left;
    font-size: 26rpx;
    text-indent: 1rem;
    margin-top: 25rpx;
  }
}

</style>
